import {
    newRecordOptions,
    categoryOptions
} from './js/myCharts'
import {
    tableData1,
    tableData2,
    tableData3
} from './js/table'
import {
    tableData4,
    tableData5,
    tableData6
} from './js/uploadTable'

export default {
    name: 'itemManage',
    data () {
        return {
            imgList: [
                {
                    id: 0,
                    icon: require('@/assets/images/search.png'),
                    iconActive: require('@/assets/images/search-active.png')
                }, {
                    id: 1,
                    icon: require('./img/QRcode-print.png'),
                    iconActive: require('./img/QRcode-print-active.png')
                }, {
                    id: 2,
                    icon: require('@/assets/images/import.png'),
                    iconActive: require('@/assets/images/import-active.png')
                }, {
                    id: 3,
                    icon: require('@/assets/images/export.png'),
                    iconActive: require('@/assets/images/export-active.png')
                }, {
                    id: 4,
                    icon: require('@/assets/images/statistics.png'),
                    iconActive: require('@/assets/images/statistics-active.png')
                }, {
                    id: 5,
                    icon: require('@/assets/images/delete.png'),
                    iconActive: require('@/assets/images/delete-active.png')
                }
            ],
            navList: [
                {
                    id: 0,
                    name: '数据资产'
                }, {
                    id: 1,
                    name: '硬件资产'
                }, {
                    id: 2,
                    name: '软件资产'
                }
            ],
            hoverIndex: -1,
            currentNav: '',
            currentTable: '',
            // 点击获取某行数据
            rowValue: {
                name: '',
                number: '',
                type: '',
                category: '',
                model: '',
                amount: '',
                brand: '',
                buyTime: '',
                buyChannel: '',
                warranty: '',
                assetStatus: '',
                assetParameters: '',
                stockreal: '',
                supplierDetails: '',
                owner: '',
                creater: '',
                createTime: '',
                updateTime: ''
            },
            statisticsDrawer: false, // 统计抽屉,
            printDialogVisible: false, // 打印弹框是否显示
            exportDialogVisible: false, // 导出Excel弹框是否显示
            uploadDialogVisible: false, // 上传Excel弹框是否显示
            detailDialogVisible: false, // 详情弹框是否显示
            createDialogVisible: false, // 新增资产弹框是否显示
            printForm: {
                mode: 'A4',
                typeSetting: '1',
                field: '名称（标题）',
                customize: '扫描二维码查看'
            }, // 打印弹框表单对象
            // 选中导出字段
            allChecked: ["名称", "资产编号", "资产类型", "资产类别", "类型/规格", "购买金额", "品牌", "购买时间", "购买渠道", "保修时间", "资产状态", "资产参数", "供应商明细", "拥有者", "创建人", "创建时间", "最近修改时间"],
            // 全部导出字段
            checkList: ["名称", "资产编号", "资产类型", "资产类别", "类型/规格", "购买金额", "品牌", "购买时间", "购买渠道", "保修时间", "资产状态", "资产参数", "供应商明细", "拥有者", "创建人", "创建时间", "最近修改时间"],
            // 是否全选
            checkAll: true,
            // checkbox 的不确定状态
            isIndeterminate: false,
            // 列表数据
            tableData1: [],
            tableData2: [],
            tableData3: [],
            // 详情弹框里的详情头部
            titles: ["变动方式", "变动时间", "处理人", "使用人", "描述"],
            // 记录内容
            lines: [
            	{changeMode:"领用",changeTime:"2019-09-21",handler:"刘天福",user:"刘天福",describe:""},
            	{changeMode:"外借",changeTime:"2019-09-24",handler:"刘天福",user:"刘天福",describe:""},
            	{changeMode:"领用",changeTime:"2019-10-11",handler:"刘天福",user:"刘天福",describe:""},
            ],
            // 新增资产
            newAsset: {
                name: '',
                number: '',
                type: '',
                category: '',
                model: '',
                amount: '',
                brand: '',
                buyTime: '',
                buyChannel: '',
                warranty: '',
                assetStatus: '',
                assetParameters: '',
                stockreal: '',
                supplierDetails: '',
                owner: '',
                creater: '',
                createTime: '',
                updateTime: '',
                record: ''
            },
            // 是否保存后新增下一条
            checked: false,
        }
    },
    computed: {
        newRecordOptions () {
            return newRecordOptions
        },
        categoryOptions () {
            return categoryOptions
        }
    },
    mounted () {
        this.tableData1 = tableData1;
        this.tableData2 = tableData2;
        this.tableData3 = tableData3;
    },
    methods: {
        // 导出全选
        handleCheckAllChange (val) {
            this.allChecked = val ? this.checkList : [];
            this.isIndeterminate = false
        },
        /**
         * 导出字段checkbox改变时触发
         * @param value
         */
        handleCheckedFieldsChange (value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.checkList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
        },
        /**
         * 鼠标移出
         * @param index
         */
        mouseLeave: function (index) {
            this.hoverIndex = index
        },
        /**
         * 鼠标移入
         * @param index
         */
        mouseEnter: function (index) {
            this.hoverIndex = index
        },
        /**
         * 头部图标点击时触发
         * @param id
         */
        iconClick (id) {
            if (id === 1) {
                this.printDialogVisible = true
            } else if (id === 2) {
                this.uploadDialogVisible = true
            } else if (id === 3) {
                this.exportDialogVisible = true
            } else if (id === 4) {
                this.statisticsDrawer = true
                this.$nextTick(() => {
                    this.initCharts()
                })
            } else if (id === 5) {
                this.$confirm('您确定要删除这条记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (this.currentNav == 1) {
                        this.tableData2.splice(0, 1);
                    } else if (this.currentNav == 2) {
                        this.tableData3.splice(0, 1);
                    } else {
                        this.tableData1.splice(0, 1);
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        /**
         * 初始化图表
         */
        initCharts () {
            // 每日新增记录
            let newRecordChart = this.$echarts.init(document.getElementById('newRecord'))
            newRecordChart.setOption(this.newRecordOptions)
            // 资产类别
            let categoryChart = this.$echarts.init(document.getElementById('category'))
            categoryChart.setOption(this.categoryOptions)
        },
        /**
         * 导航切换
         * @param index
         */
        switchNav (index) {
            this.currentNav = index
        },
        //点击某行数据
        handleRow (val) {
            this.rowValue = val;
            this.detailDialogVisible = true;
        },
        /*导入文件*/
        uploadExcel () {
            if (this.currentNav == 1) {
                this.tableData2 = tableData5;
            } else if (this.currentNav == 2) {
                this.tableData3 = tableData6;
            } else {
                this.tableData1 = tableData4;
            }
            this.uploadDialogVisible = false;
        },
        //新增资产
        creatAsset () {
            this.createDialogVisible = true;
        },

    }
}
